CSS Paint Worklet: Membuka Kekuatan Fungsi Menggambar Kustom CSS

Web adalah lanskap yang terus berkembang, dan CSS tidak terkecuali. Salah satu perkembangan terbaru yang paling menarik adalah CSS Houdini, sekumpulan API yang mengekspos bagian-bagian dari mesin rendering CSS, memberikan pengembang kontrol yang belum pernah ada sebelumnya atas penataan dan tata letak. Di antara API-API yang kuat ini, CSS Paint Worklet menonjol sebagai pengubah permainan, memungkinkan Anda untuk mendefinisikan fungsi menggambar kustom yang dapat digunakan di mana pun gambar CSS diterima. Ini berarti Anda dapat membuat efek yang dinamis, berkinerja tinggi, dan menakjubkan secara visual langsung di dalam CSS Anda, tanpa bergantung pada JavaScript atau gambar eksternal.

Apa itu CSS Paint Worklet?

CSS Paint Worklet pada dasarnya adalah modul JavaScript yang mendefinisikan fungsi `paint()`. Fungsi ini menerima konteks gambar (mirip dengan konteks API Canvas), ukuran elemen yang sedang digambar, dan properti kustom apa pun yang telah Anda definisikan di CSS Anda. Anda kemudian dapat menggunakan informasi ini untuk menggambar apa pun yang dapat Anda bayangkan, dari bentuk dan gradien sederhana hingga pola dan animasi yang kompleks.

Anggap saja ini sebagai mesin gambar kecil yang didedikasikan khusus untuk CSS Anda. Ini adalah thread terpisah (karena itu disebut "worklet") yang berjalan di latar belakang, memastikan bahwa kode gambar Anda tidak memblokir thread utama dan memengaruhi performa situs web Anda.

Mengapa Menggunakan CSS Paint Worklet?

Ada beberapa alasan kuat untuk menggunakan CSS Paint Worklet:

• Performa: Dengan memindahkan tugas menggambar ke thread terpisah, Paint Worklet dapat secara signifikan meningkatkan performa situs web Anda, terutama saat menangani efek visual yang kompleks.
• Fleksibilitas: Paint Worklet menawarkan fleksibilitas tak tertandingi dalam menciptakan efek visual kustom. Anda dapat membuat apa saja mulai dari gradien dan pola sederhana hingga animasi kompleks dan visualisasi data, semuanya di dalam CSS Anda.
• Keterpeliharaan: Dengan mengenkapsulasi logika gambar Anda dalam modul khusus, Paint Worklet dapat membuat kode CSS Anda lebih terorganisir dan mudah dipelihara.
• Ketergunaan Kembali: Anda dapat dengan mudah menggunakan kembali Paint Worklet di berbagai elemen dan proyek, menghemat waktu dan tenaga Anda.
• Penataan Dinamis: Paint Worklet dapat bereaksi terhadap properti kustom CSS (variabel), memungkinkan Anda membuat efek visual yang dinamis dan responsif yang beradaptasi dengan ukuran layar dan interaksi pengguna yang berbeda.

Memulai dengan CSS Paint Worklet

Berikut adalah panduan langkah demi langkah untuk memulai dengan CSS Paint Worklet:

1. Buat File JavaScript untuk Paint Worklet Anda

File ini akan berisi fungsi `paint()` yang mendefinisikan logika menggambar kustom Anda. Sebagai contoh, mari kita buat Paint Worklet sederhana yang menggambar pola papan catur:

            
// checkerboard.js
registerPaint('checkerboard', class {
  static get inputProperties() {
    return ['--checkerboard-size', '--checkerboard-color-1', '--checkerboard-color-2'];
  }

  paint(ctx, geom, properties) {
    const size = Number(properties.get('--checkerboard-size'));
    const color1 = String(properties.get('--checkerboard-color-1'));
    const color2 = String(properties.get('--checkerboard-color-2'));

    for (let i = 0; i < geom.width / size; i++) {
      for (let j = 0; j < geom.height / size; j++) {
        ctx.fillStyle = (i + j) % 2 ? color1 : color2;
        ctx.fillRect(i * size, j * size, size, size);
      }
    }
  }
});

            

              
                Copy
              
            
          

Penjelasan:

• `registerPaint('checkerboard', class { ... })`: Ini mendaftarkan Paint Worklet dengan nama 'checkerboard'. Ini adalah nama yang akan Anda gunakan di CSS Anda untuk merujuk ke worklet.
• `static get inputProperties() { ... }`: Ini mendefinisikan properti kustom CSS yang akan digunakan oleh Paint Worklet. Dalam kasus ini, kita menggunakan `--checkerboard-size`, `--checkerboard-color-1`, dan `--checkerboard-color-2`.
• `paint(ctx, geom, properties) { ... }`: Ini adalah fungsi utama yang melakukan penggambaran. Ia menerima konteks gambar (`ctx`), geometri elemen yang digambar (`geom`), dan properti kustom (`properties`).
• `ctx.fillStyle = ...`: Ini mengatur warna isian dari konteks gambar.
• `ctx.fillRect(i * size, j * size, size, size)`: Ini menggambar persegi panjang yang diisi pada koordinat yang ditentukan dan dengan dimensi yang ditentukan.

2. Daftarkan Paint Worklet di CSS Anda

Anda perlu mendaftarkan Paint Worklet menggunakan metode `CSS.paintWorklet.addModule()`:

            
// main.js (atau file serupa yang dimuat sebelum CSS Anda)
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('checkerboard.js');
}

            

              
                Copy
              
            
          

Penting: Kode ini perlu dijalankan sebelum Anda mencoba menggunakan Paint Worklet di CSS Anda. Pertimbangkan untuk menempatkannya di tag `